<template>
	<div class="admins">
		<div class="breadcrumb">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item>{{companyName}}</el-breadcrumb-item>
				<el-breadcrumb-item>通讯录管理</el-breadcrumb-item>
				<el-breadcrumb-item>管理员设置</el-breadcrumb-item>
			</el-breadcrumb>
			<!-- <breadcrumb></breadcrumb> -->
		</div>
		<div class="menberContent">
			<div class="menberConTitle">
				<el-button round size="mini" type="primary" @click="shiftAdmins" v-has="'转移管理员'">转移管理员</el-button>
				<el-button round size="mini" type="primary" @click="addAdmins" v-has="'新增子管理员'">新增子管理员</el-button>
				<el-button round size="mini" type="danger" @click="deleteAdmin" v-has="'g-删除'">删除</el-button>
				<el-button round size="mini" type="primary" @click="toTop">置顶</el-button>
			</div>
			<el-table ref="multipleTable" :data="pageData.items" tooltip-effect="dark" @select-all="selectOnesAdminTableclear"
			 style="width: 100%" @select="selectOnesAdmin">
				<el-table-column type="selection" width="55"></el-table-column>
				<el-table-column prop="name" label="姓名"></el-table-column>
				<el-table-column prop="jobNumber" label="工号"></el-table-column>
				<el-table-column prop="state" label="是否认证">
					<template slot-scope="scope">
						{{ scope.row.state == 'SUCCESS' ? '已认证' : scope.row.state == 'PROCESS' ? '认证中' : scope.row.statee == 'FAIL' ?'认证失败':'请前往认证' }}
					</template>
				</el-table-column>
				<el-table-column prop="mainCompany" label="主团队">
					<template slot-scope="scope">
						{{ scope.row.mainCompany?scope.row.mainCompany:'暂无主团队' }}
					</template>
				</el-table-column>
				<el-table-column prop="departmentName" label="现加入部门">
					<template slot-scope="scope">
						{{ scope.row.departmentName?scope.row.departmentName:'暂无部门' }}
					</template>
				</el-table-column>
				<el-table-column prop="roleName" label="角色">
					<template slot-scope="scope">
						{{ scope.row.roleName?scope.row.roleName:'暂无角色' }}
					</template>
				</el-table-column>
				<el-table-column prop="administrator" label="管理范围"></el-table-column>
			</el-table>
			<pagina-tion :totalNum="pageData.totalNum" @paginaClick="paginaClick"></pagina-tion>
		</div>
		<!-- 新增子管理员 -->
		<el-dialog title="新增子管理员" :visible.sync="addziAdmins">
			<el-table :data="ziSdminsTableData" @select="menberSelectionChangedialog" height="30rem" @select-all="addMenberTableTable" tooltip-effect="dark" ref="addMenberTable"
			 style="width: 100%;">
				<el-table-column type="selection" width="55"></el-table-column>
				<el-table-column property="name" label="姓名"></el-table-column>
				<el-table-column property="mainCompanyName" label="主团队"></el-table-column>
				<el-table-column property="dutiesName" label="职务">
					<template slot-scope="scope">
						{{scope.row.dutiesName?scope.row.dutiesName:'暂无职务'}}
					</template>
				</el-table-column>
				<el-table-column property="address" label="职级">
					<template slot-scope="scope">
						{{scope.row.rankName?scope.row.rankName:scope.row.cusRankName?scope.row.cusRankName:'暂无职级'}}
					</template>
				</el-table-column>
				<el-table-column property="address" label="岗位">
					<template slot-scope="scope">
						<div v-if="scope.row.postEntityList && scope.row.postEntityList.length > 0">
							<div v-for="posts in scope.row.postEntityList" :key="posts.id">{{ posts.labelName }}</div>
						</div>
						<div v-else>暂无岗位</div>
					</template>
				</el-table-column>
			</el-table>
			<div class="managementFW">管理范围选择</div>
			<div style="padding-left: 20px;">
				<el-radio-group v-model="adminRadio">
					<div>
						<el-radio :label="0">全公司</el-radio>
					</div>
					<div style="margin-top: 30px;">
						<el-radio :label="1">其所在的部门及子部门</el-radio>
					</div>
				</el-radio-group>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="addziAdmins = false">取 消</el-button>
				<el-button type="primary" @click="addMenberToDepartmentFunction">确 定</el-button>
			</span>
		</el-dialog>
		<!-- 转移管理员弹窗 -->
		<el-dialog title="转移管理员" :visible.sync="outerVisible" v-if="showCompanyData">
			<!-- 获取短信验证码部分 -->
			<div class="shiftAdminsBox">
				<div class="flex gsBox">
					<img :src="showCompanyData.company.companyLogo?showCompanyData.company.companyLogo:$globalData.defaultImg" class="logosImage" />
					<div>
						<ul>
							<li>{{ showCompanyData.company.companyName }}</li>
							<li>平台编号：{{ showCompanyData.company.platformNumber }}</li>
							<li v-if="showCompanyData.company.checkState != 'SUCCESS'">该企业暂未完成平台认证</li>
							<li v-else>该企业于<span>{{ showCompanyData.company.approveDate }}</span>完成平台认证</li>
						</ul>
					</div>
				</div>
				<div class="bottomsTip">更多功能登录管理后台：<span>oa.szfarm.com</span></div>
				<div class="managementFW" style="color: #808080;">换绑主管理账号，需要验证当前主管理账号的身份</div>
				<ul class="verifyUl">
					<li class="flex">
						<div class="verifyUlName">当前创始人：</div>
						<el-input v-model="showCompanyData.userInfo.name" disabled placeholder="请输入内容"></el-input>
					</li>
					<li class="flex">
						<div class="verifyUlName">手机号码：</div>
						<el-input v-model="showCompanyData.userInfo.phone" class="phoneNums" disabled placeholder="请输入内容"></el-input>
						<el-button type="primary" class="getCodeprimary" v-if="getCodeText == '获取验证码'" @click="getVerifyCode">获取验证码</el-button>
						<el-button type="primary" class="getCodeprimary" v-else disabled>{{getCodeText}}S</el-button>
					</li>
					<li class="flex">
						<div class="verifyUlName">验证码：</div>
						<el-input v-model="messageAuthenticationCode" placeholder="请输入验证码"></el-input>
					</li>
				</ul>
			</div>
			<!-- 选择子管理员部分 -->
			<el-dialog  title="选择子管理员" :visible.sync="innerVisible" append-to-body>
				<el-table ref="selectZiAdmin" :data="pageData.items" height="50rem" tooltip-effect="dark" @select-all="selectZiAdminAlls"
				 style="width: 100%;" @select="selectZiAdminOnes">
					<el-table-column type="selection" width="55"></el-table-column>
					<el-table-column prop="name" label="姓名"></el-table-column>
					<el-table-column prop="jobNumber" label="工号"></el-table-column>
					<el-table-column prop="state" label="是否认证">
						<template slot-scope="scope">
							{{ scope.row.state == 'SUCCESS' ? '已认证' : scope.row.state == 'PROCESS' ? '认证中' : scope.row.statee == 'FAIL' ?'认证失败':'请前往认证' }}
						</template>
					</el-table-column>
					<el-table-column prop="mainCompany" label="主团队">
						<template slot-scope="scope">
							{{ scope.row.mainCompany?scope.row.mainCompany:'暂无主团队' }}
						</template>
					</el-table-column>
					<el-table-column prop="departmentName" label="现加入部门">
						<template slot-scope="scope">
							{{ scope.row.departmentName?scope.row.departmentName:'暂无部门' }}
						</template>
					</el-table-column>
					<el-table-column prop="roleName" label="角色">
						<template slot-scope="scope">
							{{ scope.row.roleName?scope.row.roleName:'暂无角色' }}
						</template>
					</el-table-column>
					<el-table-column prop="administrator" label="管理范围"></el-table-column>
				</el-table>
				<div slot="footer" class="dialog-footer">
					<el-button @click="innerVisible = false">返回</el-button>
					<el-button type="primary" @click="submitTransfer">确定</el-button>
				</div>
			</el-dialog>
			<div slot="footer" class="dialog-footer">
				<el-button @click="outerVisible = false">取 消</el-button>
				<el-button type="primary" @click="nextStep">下一步</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import breadcrumb from '../components/breadcrumb.vue'
	export default {
		components: {
			breadcrumb
		},
		data() {
			return {
				companyId: '',
				companyName: this.$store.state.company.companyName,
				userId: '',
				queryData: {
					companyId: '',
					userId: '',
					page: 1,
					pageSize: $globalData.pageSize
				},
				// 复选框索选择的数据
				handleTableData: '',
				pageData: '', // 页面显示数据
				showCompanyData: '', // 转移管理员弹窗数据1
				// 添加子管理员弹窗
				addziAdmins: false,
				ziSdminsTableData: [], // 弹窗表格数据
				adminRadio: 1, // 单选框数据
				menberSelectionChangeData: '',
				// 转移管理员弹窗
				outerVisible: false,
				innerVisible: false,
				getCodeText: '获取验证码',//获取验证码按钮内容
				messageAuthenticationCode: '', // 用户输入的短信验证码
				// 转移管理员单个选择的数据
				selectOnesIsAdminTableData: ''
			}
		},
		watch: {
			addziAdmins(newData) {
				// 监听新增子管理员弹窗
				if (newData) {
					this.getMenberIsNotAdminList()
				} else {
					this.menberSelectionChangeData = []
					this.adminRadio = 1
				}
			},
			outerVisible(newDta){
				// 监听转移管理员一级弹窗
				if (!newDta){
					this.getCodeText = '获取验证码'
				}
			},
			innerVisible(newDta){
				// 监听转移管理员二级弹窗
				if (!newDta){
					this.$refs.selectZiAdmin.clearSelection()
					this.selectOnesIsAdminTableData = ''
					this.messageAuthenticationCode = ''
					this.queryData.userId = ''
					this.getAdminList()
				} else {
					this.queryData.userId = this.userId
					this.getAdminList()
				}
			}
		},
		mounted() {
			// this.$store.commit('set_teamNavIndex', 214)selectCompanyId
			let store = this.$store.state.user
			this.userId = store.userInfo.id
			this.companyId = this.queryData.companyId = this.$store.state.company.selectCompanyId?this.$store.state.company.selectCompanyId:this.$store.state.company.companyId
			if (this.queryData.companyId) {
				this.getAdminList()
			}
		},
		methods: {
			toTop() {
				// 编辑管理员列表置顶
				console.log(this.handleTableData)
				if(!this.handleTableData){
					this.$message.error('请选择要置顶的用户')
					return
				}
				this.$request.postForm(this.$api.topMark, {
					id: this.handleTableData.id
				}).then(res=>{
					if(res.code == 200){
						this.$message.success('操作成功')
						this.getAdminList()
						this.handleTableData = ''
					}
				})
			},
			
			
			selectOnesAdminTableclear(){
				// 表格单选操作顶部复选框，清空该表格相关的所有数据
				this.$refs.multipleTable.clearSelection()
				this.handleTableData = ''
			},
			selectOnesAdmin(selection, e) {
				// 表格单选操作
				this.$refs.multipleTable.clearSelection()
				this.$refs.multipleTable.toggleRowSelection(e, true)
				this.handleTableData = e
			},
			shiftAdmins() {
				// 转移管理员
				// 获取当前操作的公司的认证信息和公司详情
				this.getCurrentCompanyInfo()
			},
			nextStep(){
				// 下一步
				if(!this.messageAuthenticationCode){
					this.$message.error('请先获取短信验证码')
					return
				}
				// 验证用户输入的验证码是否正确
				this.$request.postForm(this.$api.verificationCode, {
					phone: this.showCompanyData.userInfo.phone,
					validCode: this.messageAuthenticationCode
				}).then(res => {
					if (res.code == 200) {
						// this.$message.success('验证成功')
						this.outerVisible = false
						this.innerVisible = true
					}
				})
			},
			submitTransfer(){
				// 确定转让公司
				if(!this.selectOnesIsAdminTableData){
					this.$message.error('请先选择要转移的用户')
					return
				}
				this.$confirm('此操作为敏感操作、转让后不可恢复, 是否继续?', '提示', {
				  confirmButtonText: '确定',
				  cancelButtonText: '取消',
				  type: 'warning'
				}).then(() => {
					this.$request.postForm(this.$api.transferCompany,{
						companyId: this.companyId,
						userId: this.selectOnesIsAdminTableData.userId,
						phone: this.showCompanyData.userInfo.phone,
						validNumber: this.messageAuthenticationCode
					}).then(res=>{
						if(res.code == 200){
							this.$message.success('转让成功')
							this.innerVisible = false
						}
					})
				})
			},
			selectZiAdminAlls(){
				// 转移管理员表格单选操作顶部复选框，清空该表格相关的所有数据
				this.$refs.selectZiAdmin.clearSelection()
				this.selectOnesIsAdminTableData = ''
			},
			selectZiAdminOnes(selection, e){
				// 转移管理员表格单选操作
				this.$refs.selectZiAdmin.clearSelection()
				this.$refs.selectZiAdmin.toggleRowSelection(e, true)
				this.selectOnesIsAdminTableData = e
			},
			getCurrentCompanyInfo(){
				// 获取当前操作的公司的认证信息和公司详情
				this.$request.postForm(this.$api.getCompanyCertificationDetail,{
					// userId: this.userId,
					companyId: this.companyId
				}).then(res=>{
					if(res.code == 200){
						this.showCompanyData = res.data
						this.$nextTick(()=>{
							this.outerVisible = true
						})
					}
				})
			},
			addAdmins() {
				// 新增子管理员
				this.addziAdmins = true
			},
			menberSelectionChangedialog(seletion, row) {
				// 新增子管理员弹窗表格单选选
				this.menberSelectionChangeData = row
				this.$refs.addMenberTable.clearSelection()
				this.$refs.addMenberTable.toggleRowSelection(row, true)
			},
			addMenberTableTable(){
				// 新增子管理员弹窗表格顶部复选框，清空该表格相关的所有数据
				this.$refs.addMenberTable.clearSelection()
				this.menberSelectionChangeData = ''
			},
			addMenberToDepartmentFunction() {
				// 新增子管理员弹窗表格确定按钮
				// this.menberSelectionChangeData
				if(!this.menberSelectionChangeData){
					this.$message.error('请先选择要添加的成员')
					return
				}
				this.$request.postForm(this.$api.newAdministrator, {
					id: this.menberSelectionChangeData.id,
					userId: this.userId,
					companyId: this.companyId,
					isAll: this.adminRadio
				}).then(res=>{
					if(res.code == 200){
						this.$message.success('新增成功')
						this.getAdminList()
						this.addziAdmins = false
					}
				})
				console.log(this.menberSelectionChangeData)
			},
			paginaClick(val) {
				// 分页
				this.queryData.page = val
				this.getAdminList()
			},
			deleteAdmin() {
				if(!this.handleTableData){
					this.$message.error('请选择要删除的用户')
					return
				}
				this.$confirm('确认删除?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					// let ids = []
					this.$request.postForm(this.$api.removeAdministrator,{
						id: this.handleTableData.id,
						userId: this.userId,
						companyId: this.companyId
					}).then(res=>{
						if(res.code == 200){
							this.$message.success('删除成功')
							if(this.queryData.page > 1){
								this.queryData.page = Math.ceil((pageData.totalNum - 1) / $globalData.pageSize)
							}
							this.handleTableData = ''
							this.getAdminList()
						}
					})
				})
			},
			getAdminList() {
				// 获取公司管理员数据
				this.$request.postForm(this.$api.getAdministrator, this.queryData).then(res => {
					if (res.code == 200) {
						this.pageData = res.data
						// this.tableData = res.data.items
					}
				})
			},
			getMenberIsNotAdminList() {
				// 获取公司非管理员成员
				this.$request.postForm(this.$api.getUsersByCompanyId, {
					companyId: this.companyId,
					userName: '',
					jobNumber: '',
					page: 1,
					pageSize: 2000,
					administrator: 'administrator'
				}).then(res => {
					if (res.code == 200) {
						this.ziSdminsTableData = res.data.items
					}
				})
			},
			getVerifyCode() {
				// 获取短信验证码
				// transferCompanySms
				let Time = 59
				if(Time == 59){
					this.getCodeText = 60
				}
				let setTime = setInterval(() => {
					if(!this.outerVisible){
						clearInterval(setTime)
						return
					}
					if (Time === 0) {
						this.getCodeText = '获取验证码'
						clearInterval(setTime)
					} else {
						this.getCodeText = Time
						Time -= 1
					}
				}, 1000)
				this.$request.postForm(this.$api.transferCompanySms, {
					companyId: this.companyId,
					phone: this.showCompanyData.userInfo.phone,
					userId: this.userId
				}).then(res => {
					if (res.code == 200) {
						console.log(res)
						this.$message.success('短信已成功发送，请及时查看')
					} else{
						clearInterval(setTime)
						this.getCodeText = '获取验证码'
					}
				}).catch(err=>{
					clearInterval(setTime)
					this.getCodeText = '获取验证码'
				})
				// Time = 60
				// clearInterval(setTime)
			}

		}
	}
</script>

<style scoped="scoped">
	.breadcrumb,
	.tableNavBox {
		padding: 20px;
	}

	.memberTitle {
		color: #333333;
		font-size: 20px;
		padding: 20px;
	}

	.menberContent {
		padding: 0 20px;
		padding-bottom: 20px;
	}

	.menberConTitle {
		width: 100%;
		background: #F3F3F3;
		text-align: left;
		padding: 5px 20px;
		margin-bottom: 20px;
	}

	.managementFW {
		width: 100%;
		background: #F3F3F3;
		color: #333333;
		font-size: 14px;
		padding: 10px 20px;
		margin: 30px 0;
	}

	.shiftAdminsBox {
		width: 100%;
		text-align: center;
		padding: 20px 0;
	}

	.gsBox {
		justify-content: center;
		align-items: center;
	}

	.gsBox li {
		line-height: 40px;
		text-align: left;
		color: #333333;
	}

	.gsBox li:first-child {
		font-size: 20px;
	}

	.gsBox li span {
		color: #F31A1A;
		margin: 0 10px;
	}

	.logosImage {
		width: 100px;
		height: 100px;
		margin-right: 40px;
	}

	.bottomsTip {
		color: #AAAAAA;
		margin: 30px 0;
	}

	.bottomsTip span {
		cursor: pointer;
	}

	.verifyUl li {
		width: 460px;
		position: relative;
		left: 50%;
		margin-left: -230px;
		/* justify-content: space-between; */
		margin-bottom: 20px;
		align-items: center;
		position: relative;
	}

	.verifyUl li .verifyUlName {
		width: 110px;
		text-align: right;
		margin-right: 10px;
	}

	.verifyUl li>>>.el-input {
		text-align: left;
	}

	.verifyUl li>>>.el-input__inner {
		width: 360px;
	}

	.verifyUl li>>>.phoneNums>.el-input__inner {
		width: 250px;
		margin-right: 10px;
	}

	.getCodeprimary {
		position: absolute;
		right: 5px;
		width: 100px;
		text-align: center;
	}
	.admins>>>.el-table__header-wrapper th .cell .el-checkbox{
		display: none;
	}
</style>
